import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Header } from '../../component';
import { Colors } from '../../theme';

export default class MessageDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render () {
        const {navigation} = this.props;
        let rules = navigation.getParam("params");//接受传过来的对象
        return (
            <View style={Styles.container}>
                <Header title='公告' onLeftPress = {() => this.props.navigation.goBack()}/>
                    <Text style={Styles.titleText1}>{rules.content}</Text>
                    <Text style={Styles.titleText2}>{rules.ceratedAt}</Text>
                    {rules.text.map(item => 
                        <View style={Styles.ruleContainer} key={item['key']}>
                            <View style={{ marginLeft: 6 }}>
                                <Text style={{ color: Colors.C0, fontSize: 14}}>{item['title']}</Text>
                                <Text style={Styles.ruleText}>{item['text']}</Text>
                            </View> 
                        </View>
                    )}
            </View>
        )
    }
}

const Styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: Colors.bai },
    ruleContainer: { flexDirection: 'row', paddingLeft: 15, paddingRight: 15, paddingTop: 10 },
    titleText1: { color: Colors.C0, textAlign: "center", lineHeight: 30, marginTop: 10 },
    titleText2: { color: Colors.C2, textAlign: "center", paddingBottom: 5 },
    ruleText: { marginTop: 4, fontSize: 14, lineHeight: 19, color: Colors.hei1 },
    verticalLine: { height: 50, width: 3, borderRadius: 3, backgroundColor: Colors.C1 },
});